<template>
  <el-menu
    :default-active="route.path"
    router
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    background-color="#0c4270"
    active-text-color="#93c8ff"
    text-color="#fff"
  >
    <el-menu-item style="padding: 0" class="noHover">
      <div style="display: flex; align-items: center" @click="router.push('/')">
        <img
          style="width: 40px; height: 40px; margin-right: 10px"
          src="@/assets/images/menuImage.png"
          alt=""
        />
        <div class="headerTitle">MicroPD</div>
      </div>
    </el-menu-item>
    <div class="menuList">
      <div class="menuItem" v-for="item in menuList" :key="item.key">
        <el-sub-menu v-if="item.children?.length > 0" :index="item.path">
          <template #title>{{ item.menuName }}</template>
          <el-menu-item
            v-for="childrenItem in item.children"
            :key="childrenItem.key"
            :index="childrenItem.path"
            @click="toPath(childrenItem.path)"
            style="font-weight: bold; font-size: 18px"
          >
            {{ childrenItem.menuName }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path" @click="toPath(item.path)">
          {{ item.menuName }}
        </el-menu-item>
      </div>
    </div>
  </el-menu>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const menuList = [
  {
    path: "/",
    menuName: "Home",
    key: "home",
  },
  {
    path: "/search",
    menuName: "Search",
    key: "search",
    children: [
      {
        path: "/search/bacteria",
        menuName: "Bacteria",
        key: "bacteria",
      },
      {
        path: "/search/viruses",
        menuName: "Viruses",
        key: "viruses",
      },
      {
        path: "/search/fungi",
        menuName: "Fungi",
        key: "fungi",
      },
    ],
  },
  {
    path: "/dataBrowse",
    menuName: "Data-Browse",
    key: "dataBrowse",
  },
  {
    path: "/jbrowseTable",
    menuName: "Genome-Browser",
    key: "genomeBrowser",
  },
  {
    path: "/download",
    menuName: "Download",
    key: "download",
  },
  {
    path: "/contact",
    menuName: "Contact",
    key: "contact",
  },
  {
    path: "/statistics",
    menuName: "Statistics",
    key: "statistics",
  },
  {
    path: "/help",
    menuName: "Help",
    key: "help",
  },
];

const toPath = (path) => {
  localStorage.setItem("searchData_status", false);
  localStorage.setItem("searchType", path.split("/")[2]);
  localStorage.removeItem("searchData");
  router.push(path).catch((err) => {
    if (err.name !== "NavigationDuplicated") {
      console.error("Navigation error:", err);
    }
  });
};
</script>

<style lang="scss" scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}

::v-deep .headerTitle {
  font-weight: 600;
  font-size: 24px;
  min-width: 100px;
  padding: 0 !important;
  text-align: left !important;
}

::v-deep .menuList {
  font-size: 30px !important;
  font-weight: bold;
  display: flex;
}

.el-menu-demo {
  width: 1330px !important;
  font-family: "Helvetica Neue" !important;
  margin: 0 auto;
}

// .el-menu {
//   width: 1400px;
//   margin: 0 auto;
// }
::v-deep .noHover:hover {
  background: none !important;
}
</style>
